<section class="page-header">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="breadcrumb">
          <li><a href="#"></a></li>
          <li class="active"></li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <h1>登陆</h1>
      </div>
    </div>
  </div>
</section>

<div class="container">

  <div class="row">
    <div class="col-md-12">

      <div class="featured-boxes">
        <div class="row">
          <div class="col-sm-6">
            <div class="featured-box featured-box-primary align-left mt-xlg">
              <div class="box-content">
                <h4 class="heading-primary text-uppercase mb-md">登陆</h4>
                <form [formGroup]="loginForm" (ngSubmit)="login()" novalidate>
                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-12" [class.has-error]="loginForm.get('username').touched && loginForm.hasError('required',['username'])">
                        <label>用户名</label>
                        <input formControlName="username" [(ngModel)]="user.username" type="text" class="form-control" placeholder="账号/手机号/邮箱">
                        <span class="help-block" [class.hidden]="loginForm.get('username').untouched || !loginForm.hasError('required',['username'])">
                         用户名不能为空
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-12" [class.has-error]="loginForm.get('password').touched && (loginForm.hasError('minlength',['password']) || loginForm.hasError('required',['password']))">
                        <a class="pull-right" href="javaScript:">(忘记密码?)</a>
                        <label>密码</label>
                        <input type="password" formControlName="password" [(ngModel)]="user.password" class="form-control">
                        <span class="help-block" [class.hidden]="loginForm.get('password').untouched || !loginForm.hasError('required',['password'])">
                          密码不能为空
                        </span>
                          <span class="help-block" [class.hidden]="loginForm.get('password').untouched || !loginForm.hasError('minlength',['password'])">
                          请至少输入6位数
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="form-group">
                      <div class="col-md-12" [class.has-error]="loginForm.get('imageCode').touched && loginForm.hasError('required',['imageCode'])">
                        <label>验证码</label>
                        <input formControlName="imageCode" style="width: 60%" class="form-control" placeholder="验证码"/>
                        <img [src]="codeImgSrc" style="position: absolute;right: 20%;bottom: 10%;" alt="验证码" ><a href="javaScript:" style="position: absolute;right: 10%;bottom: 10%;" (click)="changeCode()">换一个</a>
                        <span class="help-block" [class.hidden]="loginForm.get('imageCode').untouched || !loginForm.hasError('required',['imageCode'])">
                            验证码不能为空
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-6">
															<span class="remember-box checkbox">
																<label for="rememberme">
																	<input type="checkbox" id="rememberme" name="rememberme">记住我
																</label>
															</span>
                    </div>
                    <div class="col-md-6">
                      <input type="submit" value="登陆" class="btn btn-primary btn-lg mb-xl" data-loading-text="请求中...">
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                          还没有账号？<a [routerLink]="['/register']">去注册</a>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="featured-box featured-box-primary align-left mt-xlg">
              <div class="box-content" style="height: 250px;">
                <h4 class="heading-primary text-uppercase mb-md">第三方登陆</h4>
                <ul class="social-icons">
                  <li><a href="http://www.twitter.com/" target="_blank" title="微信登陆"><i class="fa fa-weixin"></i></a></li>
                  <li><a href="http://www.linkedin.com/" target="_blank" title="QQ登陆"><i class="fa fa-qq"></i></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</div>
